<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象的计时秒表</title>
    <style>
        .clock-body {
            width: 300px;
            background-color: #010101;
            padding-top: 10px;
            border-radius: 5px;
            overflow: hidden;
            margin: 0 auto;
        }

        #clock {
            width: calc(100% - 20px);
            margin: 0px auto;
            margin-bottom: 10px;
            min-height: 200px;
            border: 3px solid #D9D9D9;
            background-color: #010101;
            border-radius: 5px;
            padding: 5px;
            box-sizing: border-box;
            position: relative;
        }

        .boxes {
            width: 100%;
            position: relative;
        }

        .clockbox {
            border: 3px solid #606060;
            width: calc(100% - 4em);
            margin-left: 4em;
            text-align: right;
            position: relative;
            margin-bottom: 10px;
            padding: 5px 0;
            background-color: #272727;
            box-sizing: border-box;
        }

        .owner {
            width: 4em;
            position: absolute;
            top: 8px;
            left: 0;
            color: #fff;
            text-align: center;
        }

        .timestr {
            position: absolute;
            left: 0;
            top: 5px;
            color: #fff;
        }

        .btnbox {
            width: 100%;
            border-top: 2px solid #999;
        }

        .btnbox::after {
            content: ' ';
            clear: both;
            overflow: hidden;
            display: block;
        }

        .btnbox button {
            width: 25%;
            float: left;
            box-sizing: border-box;
            border-color: transparent;
            padding: 10px 0;
            border-left: 2px solid #999;
            background-color: #000;
            color: #999;
        }

        .btnbox button:nth-child(1) {
            border-left: none;
        }

        .z-musk {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255, 0.5);
            z-index: 2;
        }

        .z-dialog {
            width: 80%;
            height: 100px;
            position: absolute;
            left: 10%;
            top: 50%;
            transform: translateY(-50%);
            background-color: #fff;
            z-index: 3;
            padding: 15px 15px;
            box-sizing: border-box;
        }

        .muskbox {
            display: none;
        }

        .inputbox {
            width: 100%;
            display: flex;
            align-items: center;
        }

        .inputbox label {
            width: 4em;
        }

        .inputbox input {
            width: calc(100% - 4em);
            padding: 5px;
            box-sizing: border-box;
        }

        .z-btnbox {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
        }

        .notice {
            font-size: 12px;
            text-align: center;
            color: #f00;
            opacity: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="clock-body">
        <div class="clockscreen">
            <div id="clock">
                <div class="muskbox">
                    <div class="z-musk"></div>
                    <div class="z-dialog">
                        <div class="inputbox">
                            <label for="name">姓名：</label>
                            <input type="text" id="name" placeholder="最多四个字符" maxlength="4">
                        </div>
                        <p class="notice">请输入姓名或编号</p>
                        <div class="z-btnbox">
                            <button onclick="cancle()">取消</button>
                            <button onclick="confirm()">确定</button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="btnbox">
            <button onclick="addclock()">添加</button>
            <button onclick="allbegin()">开始</button>
            <button onclick="allstop()">暂停</button>
            <button onclick="allclear()">停止</button>
        </div>
    </div>
</body>
<script src="js/index.js"></script>
<script>
    var box = document.getElementById('clock');
    var muskbox = document.getElementsByClassName('muskbox')[0];
    var username = document.getElementById('name');
    var notice = document.getElementsByClassName('notice')[0];
    var clockList = [];

    function addclock() {
        muskbox.style.display = 'block';
        username.value = '';
        username.focus();
    }

    function allbegin() {
        clockList.map(function (c) {
            c.Timming();
            c.beginBtn.innerText = '暂停';
        })
    }

    function allstop() {
        clockList.map(function (c) {
            c.stopTimming();
            c.beginBtn.innerText = '继续';
        })
    }

    function allclear() {
        clockList.map(function (c) {
            c.clearTimming()
        })
    }

    function confirm() {
        if (!(username.value).trim()) {
            notice.style.opacity = 1;
            return;
        }
        notice.style.opacity = 0;
        var t = new Clock(box, username.value);
        clockList.push(t);
        muskbox.style.display = 'none';
    }

    function cancle() {
        muskbox.style.display = 'none';
    }
</script>

</html>